<template>
  <div id="wechat_call">
    <div class="call-head">
      <mu-tabs :value="activeTab" @change="handleTabChange" class="tab">
        <mu-tab value="0" title="一键救援" />
        <mu-tab value="1" title="一键报险" />
      </mu-tabs>
    </div>
    <div class="call-content">
      <call-insurance v-show="activeTab === '1'"></call-insurance>
      <call-rescue v-show="activeTab === '0'"></call-rescue>
    </div>
  </div>
</template>

<script>
import callInsurance from "./call_insurance"
import callRescue from "./call_rescue"
export default {
  components: { callInsurance, callRescue },
  data() {
    return {
      activeTab: '0',
    }
  },
  methods: {
    handleTabChange() {
      console.log("invoke handleTabChange")
      this.activeTab = String(Math.abs(Number(this.activeTab) - 1))
    }
  }
}
</script>

<style lang="scss" scoped>
.call-head {
  position: relative;
  &:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #929292;
    transform: scaleY(0.4);
  }
}
#wechat_call {
  .tab {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.87);
  }
}
</style>
